<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Bootstrap v3.3.4 核心 CSS 文件 -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/jquery.min.js"></script>
<!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/sqh_style_v2.0.css">
<script src="../js/sqh_wap.js"></script>
<script src="../js/sqh_js_v2.0.js"></script>
<title>报备客户</title>

    <style>
        .btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open > .dropdown-toggle.btn-default {
            background-color: #4996f6;
            border-color: #eeeeee;
            color: #333;
        }
    </style>
</head>
<body class="">

    <div class="container-fluid bg_232323 color_fff padding_top_10 padding_bottom_10">
        <a href="http://www.baidu.com">
            <div class=" col-xs-2">
                <span class="icon iconfont color_fff" aria-hidden="true">&#xe608;</span>
            </div>
        </a>
        <div class="col-xs-8 text-center">
            <span class="font_18"  role="button" aria-expanded="false">报备客户</span>
        </div>
        <div class="col-xs-2">
            <div class="col-xs-2 text-right">
            </div>
        </div>
    </div>

    <form>

    <div class="line_height_40px container-fluid border_b_top_eee border_b_bottom_eee margin_top_10">
        <div class="">
            <div class="width_70px float_left">
                <span class="color_ff3366 padding_top_1">*</span>
                <span class="margin_left_2">客户姓名</span>
            </div>
            <div class="margin_left_70">
                <div class="float_right width_110px padding_top_5">
                    <div class="btn-group float_right" role="group" aria-label="...">
                        <button type="button" class="btn btn-default bg_4996f6">先生</button>
                        <button type="button" class="btn btn-default">女士</button>
                    </div>
                </div>
                <div class="margin_right_120">
                    <input type="text" id="username" name="username" class="clear_border all_width" placeholder="客户姓名">
                </div>

            </div>
        </div>

        <div class="border_b_top_eee">
            <div class="width_70px float_left">
                <span class="color_ff3366 padding_top_1">*</span>
                <span class="margin_left_2">客户手机</span>
            </div>
            <div class="margin_left_70 relative">
                <input type="text" id="phoneNumber" name="phoneNumber" class="clear_border all_width padding_right_25" placeholder="客户手机" maxlength="12">
                <span class="absolute padding_top_10" style="top: 0;right: 0;" onclick="clearNumber(this)">
                    <img src="../img/tsdd/icon_del.png" onclick="" class="img-responsive width_20px ">
                </span>
            </div>
        </div>

        <div class="border_b_top_eee">
            <div class="width_70px float_left">
                <span class="color_ff3366 padding_top_1">*</span>
                <span class="margin_left_2">预约陵园</span>
            </div>
            <div class="margin_left_70 relative">
                <input type="text" name="address" id="address" class="clear_border all_width padding_right_25" placeholder="请选择陵园" maxlength="12">
                <span class="absolute " style="top: 0;right: 0;" >
                    <span class="icon iconfont float_right color_cccccc" aria-hidden="true">&#xe611;</span>
                </span>
            </div>
        </div>

        <div class="border_b_top_eee">
            <div class="width_70px float_left">
                <span class="color_ff3366 padding_top_1">*</span>
                <span class="margin_left_2">预约日期</span>
            </div>
            <div class="margin_left_70 relative">
                <input type="text" id="appointment_date" name="appointment_date" class="clear_border all_width padding_right_25" placeholder="请选择时间" maxlength="12" onclick="showDate(this)" readonly>
                <span class="absolute " style="top: 0;right: 0;" >
                    <span class="icon iconfont float_right color_cccccc" aria-hidden="true">&#xe611;</span>
                </span>
            </div>
        </div>

    </div>

    <div class="container-fluid border_b_bottom_eee">

        <div class="row border_b_top_eee border_b_bottom_eee bg_f4f9ff line_height_40px margin_top_20">
            <div class="container-fluid">
                <div class="width_60px float_left">
                    选填项目
                </div>
                <div class="margin_left_60 relative">
                    <span class="icon iconfont float_right color_cccccc" aria-hidden="true">&#xe611;</span>
                </div>
            </div>
        </div>

        <div class="line_height_40px container-fluid padding_right_0">

            <div class="">
                <div class="width_70px float_left">
                    <span class="margin_left_2">客户家属</span>
                </div>
                <div class="margin_left_70 relative">
                    <input type="text" name="family_name" id="family_name" class="clear_border all_width" placeholder="客户家属姓名" maxlength="12">
                </div>
            </div>

            <div class="border_b_top_eee">
                <div class="width_70px float_left">
                    <span class="margin_left_2">联系方式</span>
                </div>
                <div class="margin_left_70 relative">
                    <input type="text" name="family_phone" id="family_phone" class="clear_border all_width" placeholder="客户家属手机" maxlength="12">
                    <span class="absolute padding_top_10" style="top: 0;right: 0;" onclick="clearNumber(this)">
                        <img src="../img/tsdd/icon_del.png" onclick="" class="img-responsive width_20px ">
                    </span>
                </div>
            </div>

            <div class="border_b_top_eee">
                <div class="width_70px float_left">
                    <span class="margin_left_2">意向价位</span>
                </div>
                <div class="margin_left_70 relative">
                    <select class="all_width clear_border line_height_40px" id="expect_price" name="expect_price">
                        <option>一万元一下</option>
                        <option>1-2万</option>
                        <option>2-3万</option>
                        <option>3-5万</option>
                        <option>5万元以上</option>
                    </select>
                </div>
            </div>

            <div class="border_b_top_eee">
                <div class="width_70px float_left">
                    <span class="margin_left_2">
                        逝者姓名
                    </span>
                </div>
                <div class="margin_left_70 relative">
                    <input type="text" class="clear_border" id="passAwayName" name="passAwayName" placeholder="逝者姓名" maxlength="12">
                </div>
            </div>

        </div>


    </div>

    <div class="container-fluid text-center margin_bottom_15 line_height_40px">
        (选填项目填写充分，有利于保障您的权益)
    </div>

    <nav class="navbar navbar-default navbar-fixed-bottom" style="min-height: 40px;">
        <div class="btn_gray all_width line_height_40px" onclick="btnCommit(this)" id="submitBtn">
            确认报备
        </div>
        <input type="submit" value="确定" class="display_none" id="formSubmit">
    </nav>

    </form>

</body>
<script src="../js/mobiscroll/js/mobiscroll.core.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.frame.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.scroller.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.util.datetime.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.datetimebase.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.datetime.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.select.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.listbase.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.image.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.treelist.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.frame.ios.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.frame.sense-ui.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.frame.wp.js"></script>
<script src="../js/mobiscroll/js/mobiscroll.mobiscroll-dark.js"></script>
<script src="../js/mobiscroll/js/i18n/mobiscroll.i18n.zh.js"></script>
<link rel="stylesheet" href="../js/mobiscroll/css/import.css">
<script>

    $(function(){

        phoneNumber.onkeyup=changeBtn;
        appointment_date.onkeyup=changeBtn;
        address.onkeyup=changeBtn;
        username.onkeyup=changeBtn;

        autoNav();

        inputNumberOnly("#phoneNumber");
        inputNumberOnly("#family_phone");

        $('#appointment_date').mobiscroll().date({
            theme: 'ios',
            mode: 'scroller',
            display: 'modal',
            btnClass : 'sqh_color_56 font_16 sqh_line_height_15 margin_10 sqh_font_type',
            lang: 'zh'
        });

    });

    function showDate(){
        $('#appointment_date').click();
    }

    //获取验证码
    function getValideCode() {
        var mySetting = {
            //目标容器的ID，这个使用jquery查询的条件
            targetId: "#countDownTarget",
            //定时器的总共时长
            timeCount: 5,
            tips: "{_time_}秒"
        };

        new timerCount(mySetting);
    }

    //检查号码是否满足要求
    function isPhoneNumber(){
        var phoneNumber = document.getElementById("phoneNumber").value;
        var result = phoneNumber.isPhoneNumber();
        if(!result){
            alert("手机号不正确");
        }
        return result;
    }

    function clearNumber(obj){
        $(obj).prev("input").val("");
        changeBtn();
    }

    //检查是否输入，是否允许输入按钮
    function changeBtn(){
        var phoneNumber = document.getElementById("phoneNumber").value;
        var appointment_date = document.getElementById("appointment_date").value;
        var address = document.getElementById("address").value;
        var username = document.getElementById("username").value;
        if(username.length>0 && phoneNumber.length>0 && address.length>0 && appointment_date.length>0 ){
            $("#submitBtn").removeClass("btn_gray").addClass("btn_blue");
        }else{
            $("#submitBtn").removeClass("btn_blue").addClass("btn_gray");
        }
    }

    //提交表单
    function btnCommit(obj){
        var currentObj = $(obj);
        if(currentObj.hasClass("btn_gray")){
            return false;
        }
        if(isPhoneNumber()){
            document.getElementById("formSubmit").click();
        }
    }

</script>

</html>
